﻿@{  
    
    // Implement service
    RemoteService.WebRemoteServiceClient _remoteService = new RemoteService.WebRemoteServiceClient();

    // Get Cinemas
    List<RemoteService.Cinema> _cinemas = _remoteService.GetCinemas();

    // Create bioId cookie to save id to know what movies to display
    if (Request.QueryString["bioID"] != null && Request.QueryString["bioID"].Count() > 0)
    {
        // Set bio cookies and the lifetime
        Response.Cookies["bioId"].Value = Request.QueryString["bioID"];
        Response.Cookies["bioName"].Value = Request.QueryString["bioName"];
        Response.Cookies["bioId"].Expires = DateTime.Now.AddDays(1);
        Response.Cookies["bioName"].Expires = DateTime.Now.AddDays(1);

        // Redirect to frontpage, to let user choose movie from the bio just selected
        Response.Redirect("http://localhost:1472/");
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title</title>
        <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <script src="~/Scripts/jquery-1.7.1.min.js"></script>
        <script src="~/Scripts/jquery-ui-1.8.20.js"></script>
        <script src="~/Scripts/modernizr-2.5.3.js"></script>
        <meta name="viewport" content="width=device-width" />

        <!-- Jquery used to control lightbox / modalbox -->
        <script type="text/javascript">
            $(document).ready(function () {
                $(document).on('click', '.listBlocks', function (e) {
                    $(".outer").fadeOut();
                    $(".modal1").fadeOut();
                    $(".modalboxOverlay").fadeOut();
                });

                $(document).on('click', '.changeCin', function (e) {
                    $(".outer").fadeIn();
                    $(".modal1").fadeIn();
                    $(".modalboxOverlay").fadeIn();
                });

                // If no bio selected, force user to select one
                @{
                    if (Request.Cookies["bioId"] == null) {
                    <text>
                        $('.outer').fadeIn();
                        $(".modal1").fadeIn();
                        $(".modalboxOverlay").fadeIn();
                    </text>
                    }
                }
                
            });
        </script>
    </head>
    <body>

        <!-- MODAL BOX -->
        <div class="modalboxOverlay" style="display: none;">
        </div>

        <div class="outer" style="display: none;">
            <div class="modalbox modal1" style="display: none;">
                @{
                    // List of movies
                    foreach (RemoteService.Cinema c in _cinemas) 
                    {
                        <text>
                        <div class="listBlocks @c.Id"><a href="http://localhost:1472?bioID=@c.Id&bioName=@c.Name@c.Location">@c.Name @c.Location</a></div>
                        </text>
                    } 
                }
            </div>

            <div class="modalbox modal2" style="display: none;">
                Something happened
            </div>
        </div>


        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="~/">BioBooking</a></p>
                </div>
                <div class="float-right">
                    <nav>
                        <ul id="menu">
                            <li><a href="~/">Home</a></li>
                            <li><a class="changeCin" href="#">Change cinema</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix" style="border: 1px solid #e2e2e2; padding-left: 20px; padding-right: 20px; border-top: 0; border-bottom: 0; padding-bottom: 40px;">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - Copyright BioBooking</p>
                </div>
            </div>
        </footer>
        @RenderSection("Scripts", required: false)
    </body>
</html>